<template>
  <div class="home">
    <van-search shape="round" placeholder="请输入搜索关键词" show-action @click-input="onSearch" class="home-search">
      <template #left>
        <img src="../../assets/img/login-img.png" alt="" class="home-search-img">
      </template>

      <template #action>
        <van-icon name="gift-o" size="0.6rem" />
        <van-icon name="send-gift-o" size="0.6rem" />
      </template>

    </van-search>

    <div class="home-content">
      <!--  顶部分类 -->
      <van-tabs v-model:active="active" sticky offset-top="0.3rem" animated lazy-render>
        <van-tab v-for="index in classify" :title="index" @click-tab="to(index)">
          <div v-show="index === '直播'">
            <Live />
          </div>
          <div v-show="index === '推荐'">
            <Recommend />
          </div>
          <div v-show="index === '热门'">
            <Hot />
          </div>
          <div v-show="index === '追番'">
            <Drama />
          </div>
          <div v-show="index === '影视'">
            <Drama />
          </div>
          <div v-show="index === '新征程'">
            <Drama />
          </div>
        </van-tab>
        <template #nav-right>
          <van-icon name="bar-chart-o" size="0.6rem" />
        </template>
      </van-tabs>

    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import Recommend from '../../components/cards/recommend.vue'
import Hot from '../../components/cards/hot.vue'
import Live from '../../components/cards/live.vue'
import Drama from '../../components/cards/Drama.vue'


const router = useRouter()
const classify = [
  '直播',
  '推荐',
  '热门',
  '追番',
  '影视',
  '新征程',
]
const to = (index) => {
  console.log(index);
}
const active = ref(1)

const onSearch = () => {
  router.push('/search')
}

</script>

<style lang="less" scoped>
.home {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.home-search {
  background: #ff279aec 
}

.van-image {
  margin-right: 0.3rem;
}

.home-search-img {
  margin: 0 0.2rem 0 0.1rem;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
}

.van-search__action {
  display: flex;

  i {
    margin-left: 0.2rem;
  }
}

.home-content {
  flex: 1;
  overflow: scroll;
  margin-bottom: 1.4rem;
}
</style>